<!-- 样式1: 网格布局用户卡片 -->
<div class="users-grid">
    <!-- 有头像的用户 -->
    <div class="user-card grid-user-card">
        <div class="card-header"></div>
        <div class="avatar">
            <img src="https://picsum.photos/200/200?random=1" alt="张明的头像" class="avatar-img">
        </div>
        <div class="user-info">
            <h3 class="user-name">张明 <span class="badge bg-primary">创作者</span></h3>
            <p class="user-bio">热爱摄影和旅行，用镜头记录生活中的美好瞬间，分享旅途见闻和摄影技巧。</p>
            <div class="user-stats">
                <div class="user-stat">
                    <div class="stat-value">1.2k</div>
                    <div class="stat-label">关注</div>
                </div>
                <div class="user-stat">
                    <div class="stat-value">5.8k</div>
                    <div class="stat-label">粉丝</div>
                </div>
                <div class="user-stat">
                    <div class="stat-value">328</div>
                    <div class="stat-label">作品</div>
                </div>
            </div>
            <button class="follow-btn">关注</button>
        </div>
    </div>

    <!-- 无头像的用户 -->
    <div class="user-card grid-user-card">
        <div class="card-header"></div>
        <div class="avatar">
            <div class="avatar-placeholder">李华</div>
        </div>
        <div class="user-info">
            <h3 class="user-name">李华 <span class="badge bg-success">专家</span></h3>
            <p class="user-bio">前端开发工程师，热衷于分享JavaScript和CSS的进阶技巧，定期发布技术教程。</p>
            <div class="user-stats">
                <div class="user-stat">
                    <div class="stat-value">890</div>
                    <div class="stat-label">关注</div>
                </div>
                <div class="user-stat">
                    <div class="stat-value">12.5k</div>
                    <div class="stat-label">粉丝</div>
                </div>
                <div class="user-stat">
                    <div class="stat-value">86</div>
                    <div class="stat-label">作品</div>
                </div>
            </div>
            <button class="follow-btn following">已关注</button>
        </div>
    </div>

    <!-- 有头像的用户 -->
    <div class="user-card grid-user-card">
        <div class="card-header"></div>
        <div class="avatar">
            <img src="https://picsum.photos/200/200?random=3" alt="王芳的头像" class="avatar-img">
        </div>
        <div class="user-info">
            <h3 class="user-name">王芳 <span class="badge bg-warning">达人</span></h3>
            <p class="user-bio">美食爱好者，擅长烘焙和家常菜，分享简单易学的食谱和烹饪心得。</p>
            <div class="user-stats">
                <div class="user-stat">
                    <div class="stat-value">540</div>
                    <div class="stat-label">关注</div>
                </div>
                <div class="user-stat">
                    <div class="stat-value">8.3k</div>
                    <div class="stat-label">粉丝</div>
                </div>
                <div class="user-stat">
                    <div class="stat-value">156</div>
                    <div class="stat-label">作品</div>
                </div>
            </div>
            <button class="follow-btn">关注</button>
        </div>
    </div>

    <!-- 无头像的用户 -->
    <div class="user-card grid-user-card">
        <div class="card-header"></div>
        <div class="avatar">
            <div class="avatar-placeholder">赵伟</div>
        </div>
        <div class="user-info">
            <h3 class="user-name">赵伟 <span class="badge bg-danger">博主</span></h3>
            <p class="user-bio">科技产品测评师，专注于数码产品和智能设备的深度评测，提供专业购买建议。</p>
            <div class="user-stats">
                <div class="user-stat">
                    <div class="stat-value">320</div>
                    <div class="stat-label">关注</div>
                </div>
                <div class="user-stat">
                    <div class="stat-value">6.7k</div>
                    <div class="stat-label">粉丝</div>
                </div>
                <div class="user-stat">
                    <div class="stat-value">94</div>
                    <div class="stat-label">作品</div>
                </div>
            </div>
            <button class="follow-btn">关注</button>
        </div>
    </div>
</div>

